<template>
  <el-scrollbar class="p-discuss">
    <div class="head">
      <div class="head-top">
        <div class="search">
          <el-input v-model="search" placeholder="搜索" clearable>
            <template #prefix>
              <i class="iconfont icon-sousuo"></i>
            </template>
          </el-input>
        </div>
        <div class="tabulation">
          <n-popselect
            v-model:value="tabulationValue"
            :options="options"
            trigger="click"
          >
            <n-button>
              <template #icon>
                <i class="iconfont icon-sort-asc"></i>
              </template>
              {{ tabulation }}</n-button
            >
          </n-popselect>
        </div>
      </div>
      <div class="bottom">
        <n-button
          type="info"
          round
          size="tiny"
          @click="searchTag = true"
          style="margin-left: 10px"
        >
          <template #icon>
            <i class="iconfont icon-tianjia"></i>
          </template>
          标签查询</n-button
        >
        <el-tag
          v-for="(tag, index) in dynamicTags"
          :key="tag"
          class="mx-1 tag active-tag"
          closable
          @close="delSearchTags(index)"
        >
          <span class="tag">{{ tag.name }}</span>
        </el-tag>
      </div>
      <div class="head-foot">
        <div class="no-login">
          <div class="tip">
            <div class="ploce">
              <i class="iconfont icon-tianjia2"></i>
            </div>
            <span class="font" v-show="!$store.oj.isLogin">登录并分享题解</span>
            <span class="font" v-show="$store.oj.isLogin">快来分享题解吧</span>
          </div>
          <div class="login">
            <n-button
              type="success"
              size="small"
              v-show="$store.oj.isLogin"
              @click="showPost()"
            >
              <template #icon>
                <i class="iconfont icon-pinglun1"></i>
              </template>
              发布
            </n-button>
          </div>
        </div>
      </div>
    </div>
    <div class="foot">
      <div class="discuss">
        <discuss-item
          v-for="item in disucssList"
          :discuss="item"
          :choiceTag="choiceTag"
          @changePage="showPage"
        ></discuss-item>
      </div>
      <div class="pagination">
        <el-pagination
          layout="prev, pager, next"
          :page-count="parseInt(pageCount)"
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :hide-on-single-page="true"
          @change="changePage"
        >
        </el-pagination>
      </div>
    </div>
    <n-drawer
      v-model:show="show"
      :height="'100%'"
      placement="top"
      :auto-focus="false"
    >
      <n-drawer-content>
        <template #header>
          <div class="header">
            <div class="header-title">
              <el-form :model="discussionDate" :rules="rules">
                <el-form-item prop="title">
                  <el-input
                    id="title"
                    class="title"
                    v-model="discussionDate.title"
                    placeholder="此处输入标题..."
                    size="large"
                  />
                </el-form-item>
              </el-form>
            </div>
            <div class="doing">
              <div class="is-top" v-if="$store.oj.userData.authLevel !== 0">
                <span>置顶:</span>
                <n-switch v-model:value="isTop" size="small" />
              </div>
              <n-button type="error" size="tiny" @click="cancel">
                <template #icon>
                  <i class="iconfont icon-quxiao"></i>
                </template>
                取消
              </n-button>
              <n-button type="warning" size="tiny" @click="reset">
                <template #icon>
                  <i class="iconfont icon-zhongzhineirong"></i>
                </template>
                重置
              </n-button>
              <n-button
                type="primary"
                size="tiny"
                @click="postDiscussAPI"
                v-show="!isUpdate"
              >
                <template #icon>
                  <i class="iconfont icon-fabu-copy1-copy"></i>
                </template>
                发布讨论
              </n-button>
              <n-button
                type="primary"
                size="tiny"
                @click="updateDiscussAPI"
                v-show="isUpdate"
              >
                <template #icon>
                  <i class="iconfont icon-fabu-copy1-copy"></i>
                </template>
                更新讨论
              </n-button>
            </div>
          </div>
          <div class="bottom">
            <div class="bottom-tag">
              <div>标签:</div>
              <el-tag
                v-for="(tag, index) in postTag"
                :key="tag"
                class="mx-1 tag active-tag"
                @close="delTag(index)"
                closable
              >
                <span>{{ tag.name }}</span>
              </el-tag>
              <n-button
                type="info"
                round
                size="tiny"
                @click="isChoiceTag = true"
                style="margin-left: 10px"
              >
                <template #icon>
                  <i class="iconfont icon-tianjia"></i>
                </template>
                选择标签</n-button
              >
            </div>
          </div>
        </template>
        <markdown-vue
          ref="content"
          :detailContent="discussionDate.content"
        ></markdown-vue>
      </n-drawer-content>
    </n-drawer>
    <el-dialog class="dialog" v-model="isChoiceTag" title="标签" :modal="false">
      <div class="tag-category">
        <el-tabs :tab-position="'left'" class="demo-tabs">
          <div class="addTagTitle">添加标签</div>
          <el-tab-pane
            v-for="item in tagCategory"
            :key="item"
            :label="item.name"
          >
            <el-tag
              v-for="tag in item.tagList"
              :key="tag"
              class="mx-1 active-tag"
              :disable-transitions="false"
            >
              <span class="tag" v-show="!isChoice(tag)" @click="addTag(tag)">{{
                tag.name
              }}</span>
              <span class="tag" v-show="isChoice(tag)">{{ tag.name }}</span>
            </el-tag>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
    <el-dialog class="dialog" v-model="searchTag" title="标签" :modal="false">
      <div class="tag-category">
        <el-tabs :tab-position="'left'" class="demo-tabs">
          <div class="addTagTitle">添加标签</div>
          <el-tab-pane
            v-for="item in tagCategory"
            :key="item"
            :label="item.name"
          >
            <el-tag
              v-for="tag in item.tagList"
              :key="tag"
              class="mx-1 active-tag"
              :disable-transitions="false"
            >
              <span
                class="tag"
                v-show="!searchChoice(tag)"
                @click="searchByTag(tag)"
                >{{ tag.name }}</span
              >
              <span class="tag" v-show="searchChoice(tag)">{{ tag.name }}</span>
            </el-tag>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </el-scrollbar>
</template>

<script>
import discussItem from "./discussItem.vue";
import markdownVue from "@/components/ojComponents/markdown/markdown.vue";
import { ElMessage } from "element-plus";

import {
  getDisscussCategoryAPI,
  categoryAPI,
  getTagAPI,
  discussAPI,
  getDiscussAPI,
  getMyDiscussionAPI,
  getDiscussDetail,
  updateDiscussAPI,
} from "@/api/ojAPI/ojAPI";
export default {
  name: "PtojDiscuss",

  data() {
    return {
      tabulation: "点赞最多",
      tabulationValue: "0",
      options: [
        {
          label: "点赞最多",
          value: "0",
        },
        {
          label: "最新发布",
          value: "1",
        },
        {
          label: "最早发布",
          value: "2",
        },
      ],
      disucssList: [],
      choiceTag: [],
      isChoiceTag: false,
      isTop: false,
      show: false,
      tagCategory: [],
      discussionDate: {
        title: "",
        descript: "",
        category: "",
        content: "",
      },
      postTagId: [],
      postTag: [],
      isUpdate: false,
      rules: {
        title: [{ required: true, message: "", trigger: ["blur", "change"] }],
        category: [
          { required: true, message: "请选择分类", trigger: ["blur", "click"] },
        ],
        content: [
          {
            required: true,
            message: "请输入内容",
            trigger: ["blur", "change"],
          },
        ],
      },
      chooceCategory: {},
      searchTagsId: [],
      pageSize: 8,
      pageNum: 1,
      search: "",
      addDiscussTime: null,
      deboundTime: null,
      searchTag: false,
      dynamicTags: [],
      pageCount: null,
    };
  },
  watch: {
    tabulationValue(newValue) {
      this.tabulation = this.options[newValue].label;
    },
    search(newValue) {
      if (this.deboundTime) {
        clearTimeout(this.deboundTime);
      }
      this.deboundTime = setTimeout(() => {
        this.getDiscussAPI();
      }, 300);
    },
  },
  components: {
    discussItem,
    markdownVue,
  },
  mounted() {
    this.getDisscussCategoryAPI();
    this.getTagAPI();
    this.getDiscussAPI();
  },

  methods: {
    //查看标签是否有被选中
    searchChoice(tag) {
      let isChoice = false;
      this.dynamicTags.forEach((item) => {
        if (item.id === tag.id) {
          //判断标签是否已经存在
          //如果存在了就不让重复添加
          isChoice = true;
        }
      });
      return isChoice;
    },
    //通过标签查询讨论
    searchByTag(tag) {
      this.dynamicTags.push({
        name: tag.name,
        id: tag.id,
        isChoice: false,
      });
      this.searchTagsId.push(tag.id);
      this.choiceTag.push(tag.name);
      if (this.deboundTime) {
        clearTimeout(this.deboundTime);
      }
      this.deboundTime = setTimeout(() => {
        this.getDiscussAPI();
      }, 300);
    },
    //选出查询使用的标签
    delSearchTags(index) {
      this.dynamicTags.splice(index, 1);
      this.searchTagsId.splice(index, 1);
      this.choiceTag.splice(index, 1);
      if (this.deboundTime) {
        clearTimeout(this.deboundTime);
      }
      this.deboundTime = setTimeout(() => {
        this.getDiscussAPI();
      }, 300);
    },
    //查看标签是否有被选中
    isChoice(tag) {
      let isChoice = false;
      this.postTag.forEach((item) => {
        if (item.id === tag.id) {
          //判断标签是否已经存在
          //如果存在了就不让重复添加
          isChoice = true;
        }
      });
      return isChoice;
    },
    //将发布讨论界面显示
    showPost() {
      if (this.$store.oj.userData.id !== null) {
        this.show = true;
      } else {
        ElMessage.error("请先登录");
      }
    },
    //重置内容
    reset() {
      this.discussionDate = {
        title: "",
        descript: "",
        category: "",
        content: "",
      };
      this.postTag = [];
      this.postTagId = [];
      this.$refs.content.clearContent();
    },
    //取消发布讨论
    cancel() {
      this.show = false;
    },
    //发布讨论选择category
    chooseCategry(key, category) {
      this.chooceCategory = category;
    },
    //添加标签到要发布的报告中
    addTag(tag) {
      if (this.postTag.length <= 5) {
        this.postTag.push({
          name: tag.name,
          id: tag.id,
          isChoice: false,
        });
        this.postTagId.push(tag.id);
      } else {
        ElMessage.warning("标签数量不能大于5");
      }
    },
    //删除已选标签
    delTag(index) {
      this.postTag.splice(index, 1);
      this.postTagId.splice(index, 1);
    },
    //对发布讨论时连续点击进行防抖
    postDiscussAPI() {
      if (this.addDiscussTime) {
        clearTimeout(this.addDiscussTime);
      }
      this.addDiscussTime = setTimeout(() => {
        this.addDisucss();
      }, 300);
    },
    updateDiscussAPI() {},
    //将信息页展示出来
    showPage() {
      this.$emit("changeDetail");
    },
    //改变页数，请求分页
    changePage(page) {
      if (this.deboundTime) {
        clearTimeout(this.deboundTime);
      }
      this.deboundTime = setTimeout(() => {
        this.pageNum = page;
        this.getDiscussAPI();
      }, 300);
    },
    //对发布讨论时连续点击进行防抖
    postDiscussAPI() {
      if (this.addDiscussTime) {
        clearTimeout(this.addDiscussTime);
      }
      this.addDiscussTime = setTimeout(() => {
        this.addDisucss();
      }, 300);
    },
    //发布讨论
    async addDisucss() {
      const content = this.$refs.content.content;
      if (content === "") {
        ElMessage.error("内容请勿放空");
        return;
      }
      const title = this.discussionDate.title;
      if (title === "") {
        ElMessage.error("标题请勿放空");
        return;
      }
      const tags = this.postTagId;
      if (tags.length === 0) {
        ElMessage.error("请为讨论添加标签");
        return;
      }
      const category = {
        content: content,
        title: title,
        categoryId: this.chooceCategory.id,
        isTop: this.isTop,
        tags: tags,
        pid: this.$route.params.pid,
      };
      await discussAPI(category)
        .then((res) => {
          if (res.data.code === 200) {
            this.reset();
            ElMessage.success("发布成功");
            this.show = false;
            this.getDiscussAPI();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取分类
    async getDisscussCategoryAPI() {
      await getDisscussCategoryAPI()
        .then((res) => {
          if (res.data.code === 200) {
            this.chooceCategory = res.data.data[0];
          }
          this.isLoading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async getTagAPI() {
      await getTagAPI()
        .then((res) => {
          if (res.data.code === 200) {
            this.tagCategory = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //匿名讨论或我的讨论获取
    async getDiscussAPI() {
      const data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        like: this.search,
        tagList: this.searchTagsId,
        categoryId: "",
        pid: this.$route.params.pid,
      };
      await getDiscussAPI(data)
        .then((res) => {
          if (res.data.code === 200) {
            this.disucssList = res.data.data.records;
            this.total = res.data.data.total;
            this.pageCount = res.data.data.pages;
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.allShow = false;
      this.discussShow = false;
    },
  },
};
</script>

<style lang="less" scoped>
.p-discuss {
  width: 100%;
  height: 100%;
  min-width: 300px;
  user-select: none;
  margin-top: 15px;
  .head {
    display: flex;
    flex-direction: column;
    .head-top {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #f0f0f0;
      width: 100%;
      .search {
        width: 80%;
        min-width: 100px;
      }
    }
    .head-foot {
      padding: 0.5rem;
      margin-left: 1rem;
      margin-right: 1rem;
      background-color: #0000000a;
      border-radius: 10px;
      margin-top: 10px;
      .no-login {
        display: flex;
        justify-content: space-between;
        .login {
          padding-top: 5px;
          .n-button {
            border-radius: 10px;
            height: 1.5rem;
            align-items: center;
          }
        }
        .tip {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 110px;
          .iconfont {
            padding: 0.125rem;
            border-radius: 9999px;
            font-size: 1.3em;
            width: 1em;
            height: 1em;
          }
          .font {
            font-size: 0.75rem;
          }
        }
      }
    }

    .tabulation {
      .n-button {
        font-size: 0.875rem;
        color: #00000057;
        --n-border: none !important;
        --n-border-hover: none !important;
        --n-border-pressed: none !important;
        --n-border-focus: none !important;
        --n-border-disabled: none !important;
        --n-ripple-duration: 0s !important;
        --n-text-color-pressed: rgb(51, 54, 57) !important;
        --n-text-color-focus: rgb(51, 54, 57) !important;
      }
      .n-button:hover {
        color: #737373;
      }
    }
  }
  .bottom {
    padding: 5px 10px;
    border-bottom: 1px solid rgba(240, 240, 240, 1);
    display: flex;

    .bottom-category {
      padding-left: 12px;

      .n-button {
        height: 32px;
        border-radius: 16px;
        background-color: rgba(0, 10, 32, 0.05);
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        cursor: pointer;
        font-size: 12px;
        color: rgba(38, 38, 38, 0.75);
      }
    }

    .bottom-tag {
      display: flex;
      align-items: center;

      color: rgba(116, 121, 116, 0.89);
      font-size: 16px;

      .el-tag {
        background-color: rgba(255, 255, 255, 1);
        border: none;
        margin: 0 5px;

        ::v-deep(.el-icon) {
          color: rgba(255, 255, 255, 1);
          --el-tag-hover-color: rgba(39, 81, 89, 0.26);
        }
      }

      .tag {
        font-size: 12px;
        font-weight: 400;
        color: rgba(38, 38, 38, 0.75);
        height: 24px;
        border-radius: 12px;
        padding: 3px 8px;
        border: 1px solid rgba(0, 10, 32, 0.05);
        background-color: rgba(0, 10, 32, 0.05);
        cursor: pointer;
        transition: color 1s ease-out;
      }

      .active-tag {
        color: rgba(255, 255, 255, 1);
        background-color: rgba(86, 203, 107, 1);
        background: linear-gradient(
          to right,
          rgba(86, 203, 107, 0.7),
          rgba(86, 203, 107, 0.8),
          rgba(86, 203, 107, 0.9)
        );
        border-color: rgba(86, 203, 107, 1);
      }
    }
  }
  .foot {
    margin-top: 10px;
    padding: 10px;
  }
  .pagination {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 10, 32, 0.1), 0 2px 8px rgba(0, 10, 32, 0.05);
    display: flex;
    justify-content: center;
  }

  .dialog {
    .body-header {
      margin-bottom: 10px;
    }

    .tag-category {
      width: 170px;
      height: 264px;
      overflow-y: scroll;

      .mx-1 {
        margin: 0 5px;

        .tag {
          cursor: pointer;
        }
      }

      .mx-1:hover {
        background-color: rgba(140, 192, 250, 0.672);
        color: #fff;
        transition: color 0.3s ease;
      }
      .active-tag {
        color: rgba(255, 255, 255, 1);
        background-color: rgba(86, 203, 107, 1);
        background: linear-gradient(
          to right,
          rgba(86, 203, 107, 0.7),
          rgba(86, 203, 107, 0.8),
          rgba(86, 203, 107, 0.9)
        );
        border-color: rgba(86, 203, 107, 1);
      }

      .addTagTitle {
        height: 20px;
        font-size: 14px;
        font-weight: 500;
        color: #222226;
        line-height: 20px;
        margin-bottom: 10px;
      }
    }
  }
}
.n-drawer-content {
  --n-body-padding: 30px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;

  ::v-deep(.n-drawer-header) {
    display: block;
    padding: 10px 0 20px 0;
    border-bottom: none;
  }

  ::v-deep(.n-drawer-body) {
    background-color: #f2f3f5;
    --n-body-padding: 20px 20px;
  }

  .header {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid rgba(240, 240, 240, 1);

    .doing {
      width: 22%;
      display: flex;

      .n-button {
        margin: 0 5px;
      }

      .is-top {
        margin: 0 5px;

        span {
          font-size: 0.8875em;
          margin-right: 5px;
        }
      }
    }

    .header-title {
      min-width: 75%;
      margin-right: 15px;
      margin-top: 20px;

      .title {
        ::v-deep(.el-input__wrapper) {
          box-shadow: 0 0 0 0px
            var(--el-input-border-color, var(--el-border-color)) inset;
          cursor: text;
          padding: 7px 15px;
          font-size: 16px;

          .el-input__inner {
            font-weight: bold;
            cursor: text !important;
          }
        }
      }
    }
  }

  .bottom {
    padding: 5px 10px;
    border: 1px solid rgba(240, 240, 240, 1);
    display: flex;
    align-items: center;

    .bottom-category {
      padding-left: 12px;

      .n-button {
        height: 32px;
        border-radius: 16px;
        background-color: rgba(0, 10, 32, 0.05);
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        cursor: pointer;
        font-size: 12px;
        color: rgba(38, 38, 38, 0.75);
      }
    }

    .bottom-tag {
      display: flex;
      align-items: center;
      margin-left: 20px;
      color: rgba(116, 121, 116, 0.89);
      font-size: 16px;

      .el-tag {
        background-color: rgba(255, 255, 255, 1);
        border: none;
        margin: 0 5px;

        ::v-deep(.el-icon) {
          color: rgba(255, 255, 255, 1);
          --el-tag-hover-color: rgba(39, 81, 89, 0.26);
        }
      }

      .tag {
        font-size: 12px;
        font-weight: 400;
        color: rgba(38, 38, 38, 0.75);
        height: 24px;
        border-radius: 12px;
        padding: 3px 8px;
        border: 1px solid rgba(0, 10, 32, 0.05);
        background-color: rgba(0, 10, 32, 0.05);
        cursor: pointer;
        transition: color 1s ease-out;
      }

      .active-tag {
        color: rgba(255, 255, 255, 1);
        background-color: rgba(86, 203, 107, 1);
        background: linear-gradient(
          to right,
          rgba(86, 203, 107, 0.7),
          rgba(86, 203, 107, 0.8),
          rgba(86, 203, 107, 0.9)
        );
        border-color: rgba(86, 203, 107, 1);
      }
    }
  }
}
.dialog {
  .body-header {
    margin-bottom: 10px;
  }

  .tag-category {
    width: 170px;
    height: 264px;
    overflow-y: scroll;

    .mx-1 {
      margin: 0 5px;

      .tag {
        cursor: pointer;
      }
    }

    .mx-1:hover {
      background-color: rgba(140, 192, 250, 0.672);
      color: #fff;
      transition: color 0.3s ease;
    }
    .active-tag {
      color: rgba(255, 255, 255, 1);
      background-color: rgba(86, 203, 107, 1);
      background: linear-gradient(
        to right,
        rgba(86, 203, 107, 0.7),
        rgba(86, 203, 107, 0.8),
        rgba(86, 203, 107, 0.9)
      );
      border-color: rgba(86, 203, 107, 1);
    }

    .addTagTitle {
      height: 20px;
      font-size: 14px;
      font-weight: 500;
      color: #222226;
      line-height: 20px;
      margin-bottom: 10px;
    }
  }
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.2);
}

/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #f5f5f5;
}

/*定义滑块
     内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #b3b3b3;
}

::v-deep(.el-tabs__header) {
  padding-bottom: 12px;
  border: 0;
  background: #fff;
  width: 160px;
}

::v-deep(.el-tabs__content) {
  width: 340px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: absolute;
  left: 185px;
  width: 353px;
  padding: 9px 14px 12px;
  height: 260px;
  overflow-y: auto;
  border-radius: 0 0 4px 0;
}

::v-deep(.el-tabs__nav) {
  white-space: unset;
  position: unset;
  -webkit-transition: none;
  transition: none;
  transition: none;
  transition: none;
  float: none;
  z-index: 2;
}

::v-deep(.el-tabs--left .el-tabs__item.is-left) {
  display: block;
  padding: 0 16px !important;
  border-radius: 4px;
  height: 30px !important;
  margin: 3px 0;
  font-weight: 400;
  font-size: 14px !important;
  line-height: 30px !important;
  color: #777888;
  text-align: left;
}

::v-deep(.el-tabs--left .el-tabs__nav-wrap.is-left::after) {
  height: 0%;
}

::v-deep(.el-tabs--left .el-tabs__active-bar.is-left) {
  width: 0px;
}

::v-deep(.is-active) {
  color: #507999 !important;
  font-weight: 500 !important;
  background: #fff;
  border-radius: 0;
  border-color: #fff !important;
}

::v-deep(.el-dialog) {
  top: 34px;
  width: 560px;
  height: auto;
  z-index: 10;
  background: #fff;
  -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #e3e3e3;
  padding: 10px 0;
  padding-top: 0;
}

::v-deep(.el-dialog__header) {
  text-align: center;
  margin: 0 auto;
  margin-right: 10px;
  border-bottom: 1px solid #f0f0f2;
  text-align: center;
  font-weight: 600;
  color: #222226;
  padding-top: 5px;
  display: flex;
}

::v-deep(.el-dialog__title) {
  margin: auto auto;
  font-size: 16px;
}

::v-deep(.el-dialog__headerbtn) {
  top: 0px;
  align-items: center;
  height: 39px;
}

::v-deep(.el-dialog__body) {
  padding: 10px;
}
::v-deep(.el-input__wrapper) {
  box-shadow: none;
}
::v-deep(.el-tag.is-closable) {
  margin-left: 5px;
}
</style>
